<template>
  <div>

    <div class="absolute top-2 left-5 text-xs	font-size: 0.75rem;">楼宇概览</div>

    <!-- 盒子内容 -->
    <div class="container">
      <div class="bg-regal-bg2 text-center text-white text-xs mr-1 mt-4 rounded-md shadow-inner" style="height: 40px;">
        <span class="big-blue">26</span> <br />故障总数 <!-- 添加big-blue类到26上 -->
      </div>
      <div class="bg-regal-bg2 text-center text-white text-xs mr-1 mt-4 rounded-md shadow-inner" style="height: 40px;">
        <span class="big-yellow">35</span> <br />本月故障总数<!-- 添加big-blue类到26上 -->
      </div>
      <div class="bg-regal-bg2 text-center text-white text-xs mr-1 mt-4 rounded-md shadow-inner" style="height: 40px;">
        <span class="big-red">92.12</span> <br /><span>未处理故障</span> <!-- 添加big-blue类到26上 -->
      </div>
    </div>

    <div style="margin-top: 6px;"></div>
    <div ref="chart1" style="width: 100%; height: 250px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart1 = ref();

onMounted(() => {

  var myChart = echarts.init(chart1.value);

  var legendMap = {
    1: "故障总数",
    2: "本月故障总数",
    3: "未处理故障",
  };

  var option = {
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        var results = [];
        params.forEach(function (item) {
          var name = item.name;
          var seriesName = legendMap[item.seriesName];
          var data = item.data;
          var span = '<span style="display:inline-block;';
          span += "margin-right:5px;border-radius:5px;";
          span += "width:9px;height:9px;background-color:";
          span += item.color;
          span += '"></span>';
          span += "<span>" + seriesName + " : " + data + "</span>";
          results.push(span);
        });
        return results.join("<br />");
      },
    },
    legend: {
      formatter: function (name) {
        return legendMap[name];
      },
      data: ["1", "2", "3"],
      textStyle: {
        color: 'white',
        fontSize: '8px'
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "55%",
      top: "13%",
      containLabel: true,

    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {},
    //   },
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "1",
        type: "line",
        stack: "总量",
        data: [1, 13, 10, 13, 9, 23, 21, 19, 24, 3],
        itemStyle: {
          color: "#76ffff",
          borderWidth: 1, //设置曲线宽度
          borderColor: "#76ffff", //设置曲线颜色
          borderCap: 'round', //设置曲线两端样式为圆形
          borderJoin: 'round' //设置曲线连接处样式为圆形
        },
      },
      {
        name: "2",
        type: "line",
        stack: "总量",
        data: [2, 18, 19, 23, 29, 33, 31, 11, 23, 2],
        itemStyle: {
          color: "#d5ea50",
          borderWidth: 1, //设置曲线宽度
          borderColor: "#d5ea50", //设置曲线颜色
          borderCap: 'round', //设置曲线两端样式为圆形
          borderJoin: 'round' //设置曲线连接处样式为圆形
        },
      },
      {
        name: "3",
        type: "line",
        stack: "总量",
        data: [1, 23, 20, 15, 19, 33, 21, 12, 24, 2],
        itemStyle: {
          color: "#de0d0d",
          borderWidth: 1, //设置曲线宽度
          borderColor: "#de0d0d", //设置曲线颜色
          borderCap: 'round', //设置曲线两端样式为圆形
          borderJoin: 'round' //设置曲线连接处样式为圆形
        },

      },


    ],
  };


  myChart.setOption(option);
})
</script>



<style lang="scss" scoped>
.big-blue {
  font-size: 1.2rem;
  /* 增大字体大小 */
  color: #76ffff;
  /* 字体颜色改为蓝色 */
}

.big-yellow {
  font-size: 1.2rem;
  /* 增大字体大小 */
  color: #d5ea50;
  /* 字体颜色改为蓝色 */
}


.big-red {
  font-size: 1.2rem;
  /* 增大字体大小 */
  color: #de0d0d;
  /* 字体颜色改为蓝色 */
}

.big-blue2 {
  font-size: 0.5rem;
  /* 增大字体大小 */
}

.container {
  display: flex;
}

.bg-regal-bg2 {
  width: 80px;
}
</style>